<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="ajax.jsp"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用后台管理系统</title>
    <style>
        .form {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-item {
            margin-bottom: 15px;
        }

        label {
            display: block;
            width: 20%;
            font-weight: bold;
        }

        input[type="text"],
        select,
        textarea {
            width: 70%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .radio-group {
            display: flex;
            align-items: center;
        }

        .radio-group input[type="radio"] {
            margin-right: 5px;
        }

        .btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 20px;
        }

        .btn:hover {
            background-color: #0056b3;
        }
        .image{
            width: 150px;
            height: auto;
        }

    </style>
</head>
<body>
<div class="main">
    <h1>修改商品信息</h1>
    <div id="msg"></div>
    <form id="addForm" class="form" name="myform">
        <div class="form-item flex-row">
            <label for="goodName">商品名称</label>
            <input type="text" name="goodName" id="goodName" value="${good.goodName}" required>
        </div>
        <div class="form-item flex-row">
            <label for="image">商品图片</label>
            <img class="image" id="image" src="${good.image}">
            <input type="file" value="选择图片" />
        </div>
        <div class="form-item flex-row">
            <label for="cateId">商品类型</label>
            <select name="cateId" id="cateId">
                <c:forEach items="${cateList}" var="cate">
                    <option value="${cate.cateId}" ${cate.cateId == good.cateId?"selected":"" }>${cate.cateName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-item flex-row">
            <label for="price">销售价</label>
            <input type="text" name="price" id="price" value="${good.price}" required>
        </div>
        <div class="form-item flex-row">
            <label for="recommend">是否推荐</label>
            <div class="radio-group">
                <input type="radio" name="recommend" value="是" title="是" ${good.recommend == "是"?"checked":""}>
                <label for="recommend-yes">是</label>
                <input type="radio" name="recommend" value="否" title="否" ${good.recommend == "否"?"checked":""}>
                <label for="recommend-no">否</label>
            </div>
        </div>
        <div class="form-item flex-row">
            <label for="special">是否特价</label>
            <div class="radio-group">
                <input type="radio" name="special" value="是" title="是" ${good.special == "是"?"checked":""}>
                <label for="special-yes">是</label>
                <input type="radio" name="special" value="否" title="否" ${good.special == "否"?"checked":""}>
                <label for="special-no">否</label>
            </div>
        </div>
        <div class="form-item flex-row">
            <label for="storage">库存数</label>
            <input type="text" name="storage" id="storage" value="${good.storage}" required>
        </div>
        <div class="form-item flex-row">
            <label for="contents">商品详情</label>
            <textarea name="contents" id="contents">${good.contents} </textarea>
        </div>
        <div class="form-item flex-row" style="margin: 0 auto">
            <input type="hidden" name="goodId" id="goodId" value="${good.goodId}">
            <input type="hidden" name="sellNum" id="sellNum" value="${good.sellNum}">
            <input type="hidden" name="createTime" id="createTime" value="${good.createTime}">
            <input type="hidden" name="hits" id="hits" value="${good.hits}">
            <button type="button" class="btn" id="sub">立即提交</button>
            <button type="reset" class="btn" id="res">取消重置</button>
        </div>
    </form>
    <script>
        $('#sub').on('click', function (){
            let goodId = document.getElementById('goodId').value;
            let goodName = document.getElementById('goodName').value;
            let image = document.getElementById('image').value;
            let cateId = document.getElementById('cateId').value;
            let contents = document.getElementById('contents').value;
            let recommend = document.querySelector('input[name="recommend"]:checked').value;
            let hits = document.getElementById('hits').innerHTML;
            let price = document.getElementById('price').value;
            let sellNum = document.getElementById('sellNum').value;
            let special = document.querySelector('input[name="special"]:checked').value;
            let storage = document.getElementById('storage').value;
            let good = {
                goodId: goodId,
                goodName: goodName,
                image: image,
                cateId: cateId,
                contents: contents,
                recommend: recommend,
                hits: hits,
                price: price,
                sellNum: sellNum,
                special: special,
                storage: storage,
            }
            console.log("good==>", good);
            axiosInstance.post(
                '/good/updateGoods',
                good,
                {
                    headers: headersJson
                }
            ).then((res)=>{
                console.log(res.data);
                if (res.data.code == 200){
                    document.getElementById('msg').innerHTML = '修改成功';
                    setTimeout(()=>{
                        document.getElementById('msg').innerHTML = '';
                        navigateTo('/good/getAllGoods');
                    }, 1500);
                }else {
                    document.getElementById('msg').innerHTML = '修改出现问题';
                    setTimeout(()=>{
                        document.getElementById('msg').innerHTML = '';
                    },2000);
                }
            })
        })
    </script>
</div>
</body>
</html>
